<template>
<div id='menus'>
  <el-card :body-style="{ padding: '0px' }" class='menus_body'>
    <div slot="header">
      <span>菜单管理</span>
      <el-button @click="dialogVisible=true;dialogTitle='添加'" type="primary" v-show='btnStatus' size="mini" icon="el-icon-plus">添加顶级菜单</el-button>
    </div>
    <el-tree :default-expand-all="true" v-loading="treeLoading" :data="menusList" :props="{children:'children',label:'text'}" class='menus_el_tree'>
      <span slot-scope="{data}">
          {{data.id}}、 <i :class="data.icon"></i>{{data.text}}
          <el-dropdown @command='select'>
            <el-button size="mini" class="el-icon-arrow-down menus_select"></el-button>
            <el-dropdown-menu slot="dropdown">  
              <el-dropdown-item :command="{type:'add',id:data.id}">
                添加下级菜单
              </el-dropdown-item>
              <el-dropdown-item v-if="data.children.length==0" :command="{type:'delete',id:data.id}">
                删除
              </el-dropdown-item>
              <el-dropdown-item :command="{type:'edit',id:data.id,row:data}">
                编辑
              </el-dropdown-item>
            </el-dropdown-menu>
            <div class='menus_button'>
              <el-tooltip class="item" effect="dark" content="上 调" placement="top-start">
                  <el-button type='primary' size='mini' circle icon='el-icon-arrow-up' @click="sort(data.id,'up',data.sort)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="下 移" placement="top-start">
                  <el-button type='primary' size='mini' circle icon='el-icon-arrow-down' @click="sort(data.id,'down',data.sort)"></el-button>
              </el-tooltip>
            </div>
          </el-dropdown>
        </span>
    </el-tree>
  </el-card>
<!-- 弹出对话框 开始-->
  <el-dialog width="400px" :title="dialogTitle" :visible.sync="dialogVisible" @close='dialogClose'>
    <el-form label-position="left" :model="formData" ref="formData" :rules='rules' label-width="60px">
      <el-form-item label="名称" prop="text">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
      <el-form-item label="URL" prop="url">
        <el-input v-model="formData.url"></el-input>
      </el-form-item>
      <el-form-item label="ICON" prop="icon">
        <el-select v-model="formData.icon">
          <el-option label="无" value=""></el-option>
          <el-option v-for=" icon in icons" :key="'icon'+icon" :value="icon">
            <i :class="icon"></i>
            <span>{{icon}}</span>
          </el-option>
        </el-select>
        <i :class="formData.icon"></i>
      </el-form-item>
    </el-form>
<!-- 弹出对话框 结束-->
    <div slot="footer">
      <el-button type="text" @click="dialogVisible=false">取 消</el-button>
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusAdd" v-show='btnStatus'>确 定</el-button>
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusEdit" v-show='!btnStatus'>编 辑{edit}</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data() {
    return {
      rules:{
        text:[
        {
          validator:(rules,value,callback)=>{
            switch(true){
              case value.trim()==='':
                callback(new Error('不能为空'))
                break;
              case !/^.{2,18}$/.test(value):
                callback(new Error("2-18"));
              break
            default:
              callback();
            }
           }
        } ],
         url:[
        {
          validator:(rules,value,callback)=>{
            switch(true){
              case value.trim()==='':
                callback(new Error('不能为空'))
                break;
              case !/^(\/\w+)+$/.test(value):
                callback(new Error("格式非法"));
              break
            default:
              callback();
            }
           }
        } ]
      },
      btnStatus:true,
      treeLoading: false,
      buttonOkIcon: '',
      buttonDisabled: false,
      dialogTitle: '',
      dialogVisible: false,
      menusList: [],
      formData: {
        text: "",
        icon: "",
        url: "",
        pid: 0
      },
      icons: [
        "el-icon-info",
        "el-icon-error",
        "el-icon-success",
        "el-icon-warning",
        "el-icon-question",
        "el-icon-back",
        "el-icon-arrow-left",
        "el-icon-arrow-down",
        "el-icon-arrow-right",
        "el-icon-arrow-up",
        "el-icon-caret-left",
        "el-icon-caret-bottom",
        "el-icon-caret-top",
        "el-icon-caret-right",
        "el-icon-d-arrow-left",
        "el-icon-d-arrow-right",
        "el-icon-minus",
        "el-icon-plus",
        "el-icon-remove",
        "el-icon-circle-plus",
        "el-icon-remove-outline",
        "el-icon-circle-plus-outline",
        "el-icon-close",
        "el-icon-check",
        "el-icon-circle-close",
        "el-icon-circle-check",
        "el-icon-circle-close-outline",
        "el-icon-circle-check-outline",
        "el-icon-zoom-out",
        "el-icon-zoom-in",
        "el-icon-d-caret",
        "el-icon-sort",
        "el-icon-sort-down",
        "el-icon-sort-up",
        "el-icon-tickets",
        "el-icon-document",
        "el-icon-goods",
        "el-icon-sold-out",
        "el-icon-news",
        "el-icon-message",
        "el-icon-date",
        "el-icon-printer",
        "el-icon-time",
        "el-icon-bell",
        "el-icon-mobile-phone",
        "el-icon-service",
        "el-icon-view",
        "el-icon-menu",
        "el-icon-more",
        "el-icon-more-outline",
        "el-icon-star-on",
        "el-icon-star-off",
        "el-icon-location",
        "el-icon-location-outline",
        "el-icon-phone",
        "el-icon-phone-outline",
        "el-icon-picture",
        "el-icon-picture-outline",
        "el-icon-delete",
        "el-icon-search",
        "el-icon-edit",
        "el-icon-edit-outline",
        "el-icon-rank",
        "el-icon-refresh",
        "el-icon-share",
        "el-icon-setting",
        "el-icon-upload",
        "el-icon-upload2",
        "el-icon-download",
        "el-icon-loading"
      ]
    };
  },
  created() {
    this.getMenusList();
  },
  methods: {
    //排序补足判断
    sort(id,dir,sort){
      this.$http.post('/menus/sort',this.$qs.stringify({id,dir,sort})).then(()=>{
        this.getMenusList()
      })
    },
    getMenusList() {
      this.treeLoading = true
      this.$http.get("/menus/list").then(result => {
        this.treeLoading = false
        if(result.data.error>0 && result.data.error==4){
          this.$router.push('/login')
          return
        }
        this.menusList = this.$tree(result.data.data);
       
      });
    },
    //添加表单
    menusAdd() {
      this.$refs.formData.validate((pass)=>{
        if(!pass) return;
      this.buttonOkIcon = "el-icon-loading";
      this.buttonDisabled = true;

      this.$http
        .post("/menus/add", this.$qs.stringify(this.formData))
        .then(result => {
          this.buttonOkIcon = "";
          this.buttonDisabled = false;
          this.getMenusList();
          this.dialogVisible = false;
          this.$root.$emit('getMenusList')
          //表单重置代码
          this.$refs.formData.resetFields()
          this.formData.pid=0
        });
       })  
    },
    // 编辑数据
    menusEdit(){
      this.$http.post('menus/edit',this.$qs.stringify(this.formData)).then((result)=>{
        this.dialogVisible=false
        this.getMenusList()
      })
    },
    //关闭窗口函数
    dialogClose(){
      this.$refs.formData.resetFields();
      this.formData.pid=0;
    },
    // 删除数据
    delete(id){
      this.$http.get(`/menus/delete?id=${id}`).then(result=>{
        console.log(result)
        this.getMenusList()
      })
      // this.$http.post('/menus/delete',this.$qs.stringfy({id})).then(result=>{
      //   console.log(result)
      // })
    },

    //下拉菜单传参
    select(obj){
      switch(obj.type){
        case 'add':
          this.btnStatus=true
          this.formData.pid=obj.id
          this.dialogVisible=true
          this.dialogTitle='添加下级菜单'
          break;
          //编辑事件
        case 'edit':
          this.btnStatus=false
          this.dialogVisible=true
          this.dialogTitle='编辑'
          this.formData.text=obj.row.text
          this.formData.icon=obj.row.icon
          this.formData.url=obj.row.url
          this.$set(this.formData,'id',obj.row.id)
          break
          //删除事件框
        case 'delete':
          this.$confirm('此操作将永久删除该数据,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.delete(obj.id)
        }).catch(()=>{
          console.log('no')
        })
          this.delete(obj.id)
          break
      }
    }
  }
};
</script>

<style>
#menus .el-tree-node__content {
  height: 40px;
}
#menus .menus_el_tree{
  padding:10px 10px;
}
#menus .menus_button{
  margin-left: 10px;
  display: inline-block
}
.menus_select{
  padding:0px 5px;
  margin:2px 2px 2px 4px;
}
.menus_body{
  padding-bottom:40px;
}
</style>
